<template>
  <div>
    <div>
      <el-tabs type="border-card">
        <el-tab-pane label="单元详情"></el-tab-pane>
        <el-tab-pane label=""></el-tab-pane>
        <el-tab-pane label=""></el-tab-pane>
        <el-tab-pane label=""></el-tab-pane>
        <div class="xiaoquk">
          <div class="xiaoqu">
            <p><span class="xing">*</span>小区名称：</p>
            <span>{{ tit[0].communityname }}</span>
          </div>
          <div class="xiaoqu">
            <p><span class="xing">*</span>单元名称：</p>
            <span>{{ tit[0].unitname }}</span>
          </div>
          <div class="xiaoqu">
            <p><span class="xing">*</span>栋数：</p>
            <span>{{ tit[0].unitnum }}</span>
          </div>
          <div class="xiaoqu">
            <p><span class="xing">*</span>状态：</p>
            <span>{{ tit[0].unitstatus === 1 ? "已建成" : "未建成" }}</span>
          </div>
          <div class="xiaoqu zixun">
            <p>咨询问候：</p>
            <span v-html="tit[0].unitcontext"></span>
          </div>
        </div>
      </el-tabs>
      <div class="fanhuik">
        <el-button @click="fanhui" class="buttonn" type="primary"
          ><i class="el-icon-document-add"></i>返回</el-button
        >
        <el-button @click="bianji" class="buttonn" type="primary"
          ><i class="el-icon-top-left"></i>编辑</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      token: "",
      tit: [],
    };
  },
  created() {
    this.id = this.$route.query.id;

    this.token = localStorage.getItem("token");

    if (this.id) {
      this.getxiang(this.id);
    }
  },
  methods: {
    fanhui() {
      this.$router.push("/house/unit");
    },
    bianji() {
      this.$router.push({
        path: "/house/bianji",
        query: { id: this.id },
      });
    },
    async getxiang(id) {
      let res = await this.$axios.get(
        `http://community.byesame.com/house/getDetailId?id=${id}&token=${this.token}`
      );
      console.log(res);
      this.tit = res.data;
    },
  },
};
</script>

<style scoped>
.xiaoquk .xiaoqu{
    text-align: left;
}
.xiaoqu {
  text-align: left;
}
.zixun {
  display: flex;
  align-items: center;
}
.xiaoqu p {
  display: inline-block;
  margin-right: 0.625rem;
  text-align: right;
}
.xing {
  color: #f56c6c;
}
.fanhuik {
  position: absolute;
  right: 1.25rem;
  z-index: 999;
  top: 8rem;
}
.fanhuik .buttonn {
  display: block;
  margin-top: 1.25rem;
  margin-left: 0;
}
</style>